From: Florian Müllner <fmuellner@gnome.org>
Date: Sat, 10 Jun 2017 02:32:22 +0000 (+0200)
Subject: popupMenu: Split submenu expansion and arrow rotation
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~839^2^2~62
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=749f52fc8b2e99ff6a451fb617177d86eb6c865d;p=gnome-shell.git

popupMenu: Split submenu expansion and arrow rotation

When expanding a submenu, we currently use a single tween to animate
both the submenu actor and the source arrow. We do this by tweening
a monkey-patched JS property on the main actor, which we then use
to update the arrow's GObject property on updates. As Clutter cannot
animate random JS properties, this trick will prevent us from using
implicit animations here.

The only reason I can think of for using a single tween is to keep
both animations in perfect lock step, but as expansion and rotation
are visually quite distinct, this shouldn't be required, so just
set up separate animations for each actor.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22
---

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 8fd439fc8..cab383e92 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -1013,18 +1013,16 @@ var PopupSubMenu = class extends PopupMenuBase {
         if (animate) {
             let [, naturalHeight] = this.actor.get_preferred_height(-1);
             this.actor.height = 0;
-            this.actor._arrowRotation = this._arrow.rotation_angle_z;
             Tweener.addTween(this.actor,
-                             { _arrowRotation: targetAngle,
-                               height: naturalHeight,
+                             { height: naturalHeight,
                                time: 0.25,
-                               onUpdate: () => {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onComplete: () => {
                                    this.actor.set_height(-1);
                                }
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: targetAngle,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = targetAngle;
         }
@@ -1044,19 +1042,17 @@ var PopupSubMenu = class extends PopupMenuBase {
             animate = false;
 
         if (animate) {
-            this.actor._arrowRotation = this._arrow.rotation_angle_z;
             Tweener.addTween(this.actor,
-                             { _arrowRotation: 0,
-                               height: 0,
+                             { height: 0,
                                time: 0.25,
-                               onUpdate: () => {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onComplete: () => {
                                    this.actor.hide();
                                    this.actor.set_height(-1);
                                },
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: 0,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = 0;
             this.actor.hide();